<template>
	<div class="login container">
		
		<Header>
			
		</Header>
		<section>
			<div class="login-tel">
				<input type="text" v-model="userTel" placeholder="请输入手机号" pattern="[0-9]*">
			</div>
			<div class="login-tel">
				<input type="text" v-model="userPwd" placeholder="请输入密码">
			</div>
			<div class="login-btn" @click="login">登录</div>
			<div class="tab">
				<span @click="goLogin">短信登录</span>
				<span @click="goRecovery">找回密码</span>
				<span @click="goRegister">快速注册</span>
			</div>
		</section>
		<Tabbar></Tabbar>
	</div>
</template>

<script>
	import Header from '@/components/login/Header.vue'
	import Tabbar from '@/components/common/Tabbar.vue'
	import { Toast } from 'mint-ui'
	import http from '@/common/api/request.js'
	import {mapMutations} from 'vuex'
	export default{
		name:'UserLogin',
		data(){
			return{
				userTel:'', //用户输入的手机号
				userPwd:'', //用户输入的密码
				//验证规则
				rules:{
					//手机号验证
					userTel:{
						rule:/^1[23456789]\d{9}$/,
						msg:'手机号不能为空，并且为11位数字'
					},
					//密码验证
					userPwd:{
						rule:/^\w{6,12}$/,
						msg:'密码不能为空，并且要求为6-12位'
					}
				}
			}
		},
		components:{
			Header,
			Tabbar
		},
		methods:{
			...mapMutations(['USER_LOGIN']),
			//点击登录按钮
			login(){
				//前端验证(如有错误提示msg内信息)
				if( !this.validate('userTel') ) return;
				if( !this.validate('userPwd') ) return;
				//发送请求，后端验证
				http.$axios({
					url:'/api/login',
					method:'POST',
					data:{
						userTel:this.userTel,
						userPwd:this.userPwd
					}
				}).then(res=>{
					//提示信息
					Toast(res.msg);
					//登录失败
					if( !res.success ) return;
					//登录成功==》跳转页面，存储用户信息
					this.USER_LOGIN(res.data);
					
					//登录成功，跳转到我的页面中
					this.$router.push('/my');
				})
			},
			//快速注册
			goRegister(){
				this.$router.push('/register');
			},
			//找回密码
			goRecovery(){
				this.$router.push('/recovery');
			},
			//密码登录
			goLogin(){
				this.$router.push('/login');
			},
			//验证信息提示
			validate(key){
				let bool = true;
				if( !this.rules[key].rule.test( this[key] ) ){
					//提示信息
					Toast( this.rules[key].msg );
					bool = false;
					return false;
				}
				return bool;
			}
		}
	}
</script>

<style scoped>
	section{
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #f5f5f5;
	}
	section div{
		margin: 0.266667rem 0;
		width: 8.933333rem;
		height: 1.173333rem;
	}
	section input{
		box-sizing: border-box;
		padding: 0 0.266667rem;
		line-height: 1.173333rem;
		background-color: #fff;
		border-radius: 1px solid #ccc;
		border-radius: 6px;
	}
	.login-tel{
		margin-top: 0.533333rem;
	}
	.login-tel input{
		width: 8.933333rem;
	}
	.login-code{
		display: flex;
	}
	.login-code input{
		flex: 1;
	}
	.login-code button{
		padding: 0 0.533333rem;
		line-height: 1.173333rem;
		color: #fff;
		background-color: #b0352f;
		border: 0;
		border-radius: 6px;
	}
	.login-btn{
		line-height: 1.173333rem;
		text-align: center;
		background-color: #b0352f;
		border-radius: 0.16rem;
		color: #fff;
	}
	.tab{
		display: flex;
		justify-content: space-between;
		font-size: 12px;
	}
</style>